<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>员工列表</title>
    <link rel="stylesheet" type="text/css" href="../css/global.css">

</head>
<style>
    .container {
        display: flex;
        flex-direction: column;
        /*height: 100vh;*/
        /*overflow: hidden;*/
        border: 3px solid #d9d9d9;
    }

    .main {
        width: 100%;
        background: #333;
        color: #ffff;
        line-height: 50px;
        text-align: center;
        flex-shrink: 0;
        display: flex;
        padding: 10px;
    }

    .content {
        flex: 1;
        /*padding: 30px;*/
        min-height: 400px;
        display: flex;
    }

    label {
        margin-left: 20px;
    }

    input, .operate {
        flex: 1;
        height: 30px;
    }

    .left {
        display: flex;
        /* 垂直居中 */
        align-items: center;
        width: 200px;
        border-right: 3px solid #d9d9d9;
        /*background: aqua;*/
    }

    .right {
        flex: 1;
    }

    table {
        border-color: #d9d9d9;
    }

    td {
        text-align: center;
    }


</style>
<body>
<div class="container">
    <form class="main" name="query">
        <label for="name">
            用户姓名/用户id：<input id="name" type="text"/>
        </label>
        <label for="department">
            用户部门：<input id="department" type="text"/>
        </label>
        <div class="operate">
            <button id="btn">查询</button>
            <button id="add">新增</button>
        </div>

    </form>
    <div class="content">
        <div class="left">
            <span>部门树</span>
        </div>
        <div class="right">

            <table border="1" width="100%" height="300px" align="center">
                <thead bgcolor="#cccccc">
                <th style="width: 15% ">用户id</th>
                <th style="width: 15%  ">用户姓名</th>
                <th style="width: 15%  ">用户部门</th>
                <th style="width: 100%  ">
                <th>
                </thead>
                <tbody class="tbody" bgcolor="#cccccc">
                <tr>
                    <td>test1</td>
                    <td>测试1</td>
                    <td>部门1</td>
                    <td></td>
                </tr>
                <tr>
                    <td>test1</td>
                    <td>测试1</td>
                    <td>部门1</td>
                    <td></td>
                </tr>
                <tr>
                    <td>test1</td>
                    <td>测试1</td>
                    <td>部门1</td>
                    <td></td>
                </tr>
                <tr>
                    <td>test1</td>
                    <td>测试1</td>
                    <td>部门1</td>
                    <td></td>
                </tr>
                <tr>
                    <td>test1</td>
                    <td>测试1</td>
                    <td>部门1</td>
                    <td></td>
                </tr>
                <tr>
                    <td>test1</td>
                    <td>测试1</td>
                    <td>部门1</td>
                    <td></td>
                </tr>
                </tbody>
            </table>

        </div>
    </div>
</div>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">


    $(function () {
        var queryVariable = getQueryVariable(decodeURI(window.location.href));
        let uuid = guid();
        let name = queryVariable['name'];
        let options = queryVariable['options'];
        debugger
        if (name != "" && name != undefined && options != "" && options != undefined) {
            $(".tbody").prepend("<tr><td>" + uuid + "</td><td>" + name + "</td>><td>" + options + "</td><td></td></tr>")
        }


        console.log(queryVariable);
    });

    function guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
            var r = Math.random() * 16 | 0,
                v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }

    function getQueryVariable(arr) { //接收带参的处理
        var strs = arr.split("?")[1];
        var paramt = strs.split("&");
        var obj = {};
        for (let i = 0; i < paramt.length; i++) {
            let g = paramt[i].split("=");
            obj[g[0]] = g[1];
        }
        return obj;
    }


    $("#btn").click(function () {
        let name = $("#name").val()
        let department = $("#department").val()
        let url = encodeURI("http://localhost:8080/department/list?name=" + name + "&" + "department=" + department)
        alert(url)
        // console.log(url)
        // $.ajax({
        //     type: 'get',
        //     url: url,
        //     success: function (obj) {
        //     },
        //     error: function (obj) {
        //         layer.alert("网络出现异常，请稍后重新发布！！！！")
        //     }
        // });
    })
    $("#add").click(function () {
        window.open("./form.html")
    })
</script>

</body>
</html>
